<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <h1>The Jquery Ajax 01 Page</h1>
   <button onclick="doAjax()">$.ajax(...)</button>
   <button onclick="doAjaxPost()">$.post(...)</button>
   <button onclick="doAjaxGet()">$.get(...)</button>
   <button onclick="doAjaxLoad()">$("..").load(...)</button>
   <div id="result"></div>
   <script src="/js/jquery.min.js"></script>
<script>
    function doAjaxLoad(){
        let url="http://localhost/doAjaxGet";
        //load函数就是将url指定的资源异步加载到指定位置(例如result位置)
        // $("#result").load(url);//底层是get请求
        $("#result").load(url,function(){
            console.log("load finish");//load异步加载结束执行此回调函数
        });//底层是get请求
    }
    function doAjaxGet(){
       // debugger
        let url="http://localhost/doAjaxGet";
        let params="";
        // $.ajax({//默认为get请求
        //    url:url,
        //    data:params,
        //    dataType:"text",
        //    success:function(result){
        //        console.log(result);
        //        $("#result").html(result);
        //    }
        // })
        //ajax函数get请求方式的简化写法
        $.get(url,params,function(result){
            console.log(result);
            $("#result").html(result);
        },"text")
        //这里的text表示服务端响应到客户端的数据类型,
        //假如是json,客户端会将其转换为json格式的js对象.
    }
    function doAjaxPost(){
        let url="http://localhost/doAjaxPost";
        let params="id=101&name=Computer&remark=Computer...";
        // $.ajax({
        //     type:"POST",//省略type,默认就是get请求
        //     url:url,
        //     data:params,
        //     //contentType:"application/x-www-form-urlencoded",指定客户端向服务端传递的数据类型
        //     success:function(result){//result为服务端响应的结果
        //         console.log(result);//ajax函数内部将服务端返回的json串转换为了js对象
        //     }//success函数会在服务端响应状态status==200,readyState==4的时候执行.
        // });

        $.post(url,params,function(result){
             //document.getElementById("result").innerHTML=result;
            $("#result").html(result);//jquery中对上面的代码的简化
        });
    }
    function doAjax(){
       let url="http://localhost/doAjaxGet";
       let params="";
       //这里的$代表jquery对象
       //ajax({})这是jquery对象中的一个ajax函数(封装了ajax操作的基本步骤)
       $.ajax({
          type:"GET",//省略type,默认就是get请求
          url:url,
          data:params,
          async:true,//默认为true,表示异步
          success:function(result){//result为服务端响应的结果
              console.log(result);//ajax函数内部将服务端返回的json串转换为了js对象
          }//success函数会在服务端响应状态status==200,readyState==4的时候执行.
       });
    }
</script>
</body>
</html>